import axios from 'axios'
// 导入vuex实例
import store from '../store'
// 导入router实例
import router from '../router'

// 1. axios.create 创建新axios实例
const request = axios.create({
  // baseURL后台基础地址
  baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net'
})

// 2. 给request添加拦截器

// 请求拦截器=》发请求之前
request.interceptors.request.use(config => {
  // 使用场景：全局注入token
  /**
   * 1. 获取token =》vuex
   * 2. 设置header
   */
  const { token } = store.state.user.profile
  if (token) {
    // 根据后台文档添加header参数
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
}, e => Promise.reject(e))

// 响应拦截器=》发请求之后
request.interceptors.response.use(
  (response) => {
    // 请求成功：2xx 走到这里
    // console.log('后台返回：', response)
    // == 指定返回的数据 ==
    const returnData = {
      msg: response.data.msg,
      data: response.data.result
    }

    return returnData
  },
  (error) => {
    // 请求失败：2xx 以外走到这里
    // 使用场景：401 =》处理返回数据 token失效跳回到登录页
    if (error.response.status === 401) {
      /**
       * 1. 获取当前访问页面的地址
       * 2. 跳回登录页并携带当前访问页面的地址 =》登陆成功之后，可以回跳到上次401访问的页面
       */
      /**
       * 获取当前页面地址：
       * vue2 => router.currentRoute.path
       * vue3 => router.currentRoute.value.path
       */
      store.dispatch('user/logoutAction')
      const backPath = router.currentRoute.value.path
      router.replace(`/login?backPath=${backPath}`)
    }
    return Promise.reject(error)
  }
)

/**
 * 对axios.create()=>request做二次封装=》方便使用
 * 1. 不封装，如何用request发请求？
 * request({
 *   url:'path',
 *   method:'get | post | delete',
 *   params:{} // get请求
 *   data:{} // post请求
 * }).then()
 *
 * 2. 二次封装 =》自定义参数 =》
 */
/**
 *
 * @param {*} url 请求地址
 * @param {*} method 请求方法
 * @param {*} data 请求参数
 * return 请求的Promise对象
 *
 * 使用 myRequest发请求，示例：myRequest(url, method, data).then()
 */
const myRequest = (url, method, data) => {
  // 返回请求的Promise对象
  return request({
    url,
    method,
    // 如何根据method动态添加params和data属性并赋值：[]
    [method === 'get' ? 'params' : 'data']: data
    // params: {}, // get请求
    // data: {}
  })
}

// 3. 导出request实例
export default myRequest
